<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>1.引子_展示学校和人员信息</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo">
			<h1>人员信息</h1>
			<h3>姓名：{{pname}}</h3>
			<h3>年龄：{{age}}</h3>
			<button @click="showPersonInfo">点我提示个人信息</button>
			<hr>
			<h1>学校信息</h1>
			<h3>校名：{{sname}}</h3>
			<h3>地址：{{address}}</h3>
			<button @click="showSchoolInfo">点我提示学校信息</button>
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			new Vue({
				el:'#demo',
				data:{
					pname:'龙哥',
					age:18,
					sname:'尚硅谷',
					address:'宏福科技园'
				},
				methods:{
					showPersonInfo(){
						alert(`我叫：${this.pname}，我今年：${this.age}岁了`)
					},
					showSchoolInfo(){
						alert(`${this.sname}，坐落于：${this.address}`)
					}
				}
			})
		</script>
	</body>
</html>